<template>
  <view class="container">
    <!-- 搜索框 -->
    <view class="search-container">
      <view class="search-box">
        <image class="search-icon" src="@/static/images/search.png"></image>
        <input
          class="search-input"
          v-model="searchName"
          placeholder="请输入学生姓名搜索"
          @confirm="handleSearch"
        />
      </view>
    </view>

    <!-- 滚动容器 -->
    <scroll-view
      :enable-back-to-top="true"
      :refresher-enabled="true"
      @refresherrefresh="onRefresherrefresh"
      :refresher-triggered="isTriggered"
      @scrolltolower="handleLoadMore"
      class="message-list"
      :scroll-y="true"
    >
      <StudentBaseInfo
        v-for="student in studentInfoList"
        :key="student.id"
        :studentInfo="student"
      />
      <!-- 空状态显示 -->
      <view class="empty-state" v-if="studentInfoList.length === 0 && !isLoading">
        <image class="empty-icon" src="@/static/images/empty.png" mode="aspectFit"></image>
        <text class="empty-text">暂无相关学生数据</text>
        <button class="empty-button" @click="onRefresherrefresh">刷新</button>
      </view>
    </scroll-view>

    <!-- 添加学生悬浮按钮 -->
    <view class="add-btn" @click="navigateToAdd">
      <image class="add-icon" src="@/static/images/add.png"></image>
    </view>
  </view>
</template>

<script setup lang="ts">
import { ref, onMounted, onUnmounted } from 'vue'
import StudentBaseInfo from './components/StudentBaseInfo.vue'
import type { StudentInfoItem, StudentInfoParams } from '@/types/studentInfo'
import { getStudentBaseInfoList } from '@/services/studentInfo.ts'

const studentInfoList = ref<StudentInfoItem[]>([])
const hasMoreInfo = ref(true)
// 是否加载中标记
const isLoading = ref(false)
const studentInfoParams = ref<StudentInfoParams>({ pageNum: 1, pageSize: 10 })
// 搜索关键词
const searchName = ref('')
// 获取消息列表
const getStudentInfoListData = async (pageParams: StudentInfoParams) => {
  // 如果是下拉刷新，清空现有数据
  if (pageParams.pageNum === 1) {
    studentInfoList.value = []
    hasMoreInfo.value = true
  }

  // 如果没有更多数据，直接返回
  if (!hasMoreInfo.value) {
    return
  }

  try {
    // 如果有搜索关键词，添加到参数中
    if (searchName.value) {
      pageParams.name = searchName.value
    } else {
      pageParams.name = ''
    }
    const res = await getStudentBaseInfoList(pageParams)
    // 添加数据
    if (pageParams.pageNum === 1) {
      studentInfoList.value = res.data.rows
    } else {
      studentInfoList.value = [...studentInfoList.value, ...res.data.rows]
    }
    // 判断是否还有更多数据
    hasMoreInfo.value = res.data.rows.length === pageParams.pageSize
    // 更新页码
    studentInfoParams.value.pageNum = pageParams.pageNum
  } catch (error) {
    console.error('获取学生列表失败:', error)
  }
}

// 加载数据
const loadData = async () => {
  isLoading.value = true
  await getStudentInfoListData(studentInfoParams.value) // 重置为第一页
  isLoading.value = false
}

// 当前下拉刷新状态
const isTriggered = ref(false)
// 自定义下拉刷新被触发
// 下拉刷新
const onRefresherrefresh = async () => {
  isTriggered.value = true
  // 根据当前标签刷新对应数据
  studentInfoParams.value.pageNum = 1
  studentInfoParams.value.pageSize = 10
  await getStudentInfoListData(studentInfoParams.value)
  isTriggered.value = false
}
// 上拉加载更多
const handleLoadMore = () => {
  if (hasMoreInfo.value) {
    studentInfoParams.value.pageNum = (studentInfoParams.value.pageNum ?? 1) + 1
    getStudentInfoListData(studentInfoParams.value)
  }
}
// 处理搜索
const handleSearch = () => {
  // 重置页码
  studentInfoParams.value.pageNum = 1
  // 执行搜索
  getStudentInfoListData(studentInfoParams.value)
}

// 清空搜索
const clearSearch = () => {
  searchName.value = ''
  // 重置页码并重新加载数据
  studentInfoParams.value.pageNum = 1
  getStudentInfoListData(studentInfoParams.value)
}

// 跳转到添加学生页面
const navigateToAdd = () => {
  uni.navigateTo({
    url: '/pages/student/addOrUpdate',
  })
}

// 页面加载时执行
onMounted(async () => {
  // 首次加载数据
  await loadData()
  // 监听添加/编辑学生后的刷新事件
  uni.$on('refreshStudentList', onRefresherrefresh)
})

// 页面卸载时执行
onUnmounted(() => {
  // 移除事件监听
  uni.$off('refreshStudentList', onRefresherrefresh)
})
</script>

<style scoped lang="scss">
/* 容器样式 */
.container {
  display: flex;
  flex-direction: column;
  height: 100vh;
  box-sizing: border-box;
}

/* 搜索框样式 */
.search-container {
  padding: 20rpx;
  background-color: $student-bg-color;
}

.search-box {
  display: flex;
  align-items: center;
  background-color: white;
  border-radius: 8rpx;
  padding: 0 20rpx;
  height: 80rpx;
  position: relative;
}

.search-icon {
  width: 40rpx;
  height: 40rpx;
  margin-right: 20rpx;
  opacity: 0.5;
}

.search-input {
  flex: 1;
  height: 100%;
  font-size: 28rpx;
}

.clear-icon {
  width: 40rpx;
  height: 40rpx;
  opacity: 0.5;
  position: absolute;
  right: 20rpx;
}

/* 滚动容器样式 */
.message-list {
  padding: 20rpx 0;
  background-color: $student-bg-color;
  flex: 1;
  overflow: auto;
}

/* 空状态样式 */
.empty-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 100rpx 0;
}

.empty-icon {
  width: 200rpx;
  height: 200rpx;
  margin-bottom: 30rpx;
  opacity: 0.5;
}

.empty-text {
  font-size: 28rpx;
  color: $student-text-tertiary;
  margin-bottom: 30rpx;
}

.empty-button {
  background-color: $student-primary-color;
  color: white;
  border-radius: 44rpx;
  padding: 0 60rpx;
  font-size: 28rpx;
}

/* 加载中状态 */
.loading-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 40rpx 0;
}

.loading-text {
  font-size: 28rpx;
  color: $student-text-tertiary;
  margin-top: 16rpx;
}

/* 弹窗样式 */
.record-popup {
  display: flex;
  align-items: flex-end;
}

.popup-content {
  width: 100% !important;
  max-width: 700rpx;
  margin: 0 auto;
  padding: 30rpx;
  background-color: $student-card-bg;
  border-radius: 20rpx 20rpx 0 0;
  box-shadow: 0 -10rpx 30rpx rgba(0, 0, 0, 0.1);
}

.popup-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 32rpx;
  padding-bottom: 16rpx;
  border-bottom: 1rpx solid $student-border-color;
}

.popup-title {
  font-size: 32rpx;
  font-weight: bold;
  color: $student-text-primary;
}

.textarea-input {
  min-height: 160rpx;
  border: 1rpx solid $student-border-color;
  border-radius: 8rpx;
  padding: 20rpx;
}

.file-picker {
  margin-top: 10rpx;
}

.popup-footer {
  display: flex;
  justify-content: flex-end;
  gap: 16rpx;
  margin-top: 40rpx;
}

.popup-footer button {
  border-radius: 44rpx;
  padding: 0 40rpx;
  font-size: 28rpx;
  height: 88rpx;
  line-height: 88rpx;
}

/* 按钮样式优化 */
.popup-footer button:first-child {
  background-color: #f5f7fa;
  color: $student-text-secondary;
}

/* 评分组件样式 */
.uni-rate {
  margin-top: 8rpx;
}

/* 添加按钮样式 */
.add-btn {
  position: fixed;
  right: 40rpx;
  bottom: 40rpx;
  width: 120rpx;
  height: 120rpx;
  border-radius: 50%;
  background-color: $student-primary-color;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 4rpx 20rpx rgba(0, 0, 0, 0.2);
  z-index: 999;
}

.add-icon {
  width: 60rpx;
  height: 60rpx;
  color: white;
}
</style>
